<template>
    <div class="box">
        <h3>编程式导航</h3>
        <pre>
            通过JS逻辑代码控制的页面切换功能，被称之为编程式导航;
            编程式导航主要实现在路由页面切换前完成逻辑操作;

            vue-router 模块在创建的路由对象上存在大量导航切换方法包括如下：
                $router.push( to属性取值 ) => 导航切换 => 类似于 RouterLink 的切换
                $router.go( n )  => n 取值为大于0的数值 => 向前推进几个导航页面
                $router.back() => 返回上一页
                $router.forward() => 等效于 $router.go(1) 
                $router.replace( to属性取值 ) => 导航切换 => 类似于 RouterLink 的切换
                                            => 替换现有路由地址 => 不能 back 的切换
            
            程序开发中只要在组件中完成路由对象加载，通过调用路由对象的相关方法，即可完成编程式导航切换操作；
            vue-router模块在完成加载时通过 use 安装了一个全局对象 $router ,该对象为路由对象也叫路由控制对象;
                核心代码 ：app.config.globalProperties.$router = router;

            方式一：【选项式规则】
                通过 this 组件实例直接调用 $router
            方式二：【组合式规则】
                通过加载 useRouter 完成路由控制对象的定义，通过定义的路由控制对象进行操作，代码如下
                    import { useRouter } from "vue-router";
                    const $router = useRouter();
                    function goPage(){
                        $router.go(3)
                    }
        </pre>
        <div>
            username：<input type="text" v-model="username">
        </div>
        <input type="button" value="Home" @click="changeHome()">
        <br>
        <input type="button" value="go(3) => 先操作后退三次" @click="goPage()">
        <br>
        <input type="button" value="back()" @click="goBack()">
        <br>
        <input type="button" value="forward()==go(1)" @click="goForward()">
        <br>
        <input type="button" value="replace to home" @click="goReplaceHome()">
    </div>
</template>

<!-- <script>
export default {
    data() {
        return {
            username: ""
        }
    },
    methods:{
        changeHome(){
            // console.log( this.$router )
            if(this.username!=""){
                // this.$router.push("/default")
                // this.$router.push({
                //     path:"/default"
                // })
                this.$router.push({
                    name:"default"
                })
            }
        },
        goPage(){
            this.$router.go(3)
        },
        goBack(){
            this.$router.back();
        },
        goForward(){
            this.$router.forward();
        },
        goReplaceHome(){
            this.$router.replace({
                name:"default"
            })
        }
    }
}
</script> -->

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const $router = useRouter();

let username = ref("");
function changeHome(){
    // console.log( $router )
    if(this.username!=""){
        // $router.push("/default")
        // $router.push({
        //     path:"/default"
        // })
        $router.push({
            name:"default"
        })
    }
}
function goPage(){
    $router.go(3)
}
function goBack(){
    $router.back();
}
function goForward(){
    $router.forward();
}
function goReplaceHome(){
    $router.replace({
        name:"default"
    })
}

</script>

<!-- <script setup>

</script> -->

<style lang="scss" scoped>

</style>